<template>
  <div>组合式</div>
  <p>count: {{ store.count }}</p>
  <p>doubleCount: {{ store.doubleCount }}</p>
  <p>name: {{ store.name }}</p>
  <button @click="fn">btn</button>
  <button @click="reset">reset</button>

  <hr />

  <Child />
</template>

<script lang="ts" setup>
import { useCounterStore } from "@/stores/counter";
import Child from "./Child.vue";

// 获取实例
const store = useCounterStore();

const fn = () => {
  // 直接改的方式是改一个变量
  // store.count++;

  // $patch可以同时改变多个变量
  // store.$patch({
  //   count: store.count + 1,
  //   name: "lisi",
  // });

  // 是通过调用actions的方法来改变
  store.increment();
};

const reset = () => {
  // 用来重置仓库数据
  store.$reset();
};
</script>
